<template>
  <app-page>
    <div class="fangan_index">
      <div class="button_head">
        <div class="tabs">
          <div :class="store.state.activetabs == 0 ? 'activetab' : ''" @click="store.clicktabs(0)">自动</div>
          <div :class="store.state.activetabs == 1 ? 'activetab' : ''" @click="store.clicktabs(1)">跟单</div>
        </div>
        <div>
          <el-button type="primary" class="hovepcvicecolor" @click="store.openschemegendan()">新增跟单方案</el-button>
          <el-button type="primary" class="hovepcvicecolor" @click="store.openscheme()">新增自动方案</el-button>
        </div>

      </div>
      <div style="height: calc(100% - 56px)">
        <List v-loading="store.state.loadingtable" />
      </div>
      <Footer />
    </div>
  </app-page>
</template>

<script setup>
import Footer from './components/Footer.vue'
import List from "./components/List.vue";
import { useFananStore } from './fanan-store.js'

const store = useFananStore()

provide('Fanan', {
  store,
  state: store.state,
})
</script>

<style lang="scss" scoped>
.fangan_index {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;

  flex-direction: column;
}

.button_head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 0 16px;

  .tabs{
    display: flex;

    div{
      margin-right: 16px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;

    }

    .activetab{
      color: var(--pcmain-color);
    }
  }
}
</style>
